<template>
    <div class='head'>
        <div class="head-left">
            <div class="head-left-top">
                <div class="left-top-cent">
                    <img src="../assets/5.png" style="width: 87px; height: 87px;" />
                    <div style="padding: 8px 0px; margin-left: 20px;">
                        <p style="font-family: HarmonyOS Sans SC, HarmonyOS Sans SC; font-weight: 400;font-size: 18px; color: #333333;line-height: 24px;text-align: left;
                        font-style: normal;padding-bottom: 16px;">{{$store.state.userInfor.name}}教官您好，今天也是元气满满的一天~</p>
                        <p style="font-weight: 400;font-size: 14px; color: #999999;
                        line-height: 24px;
                        text-align: left;
                        font-style: normal;">登录时间：2024-04-08 08:30:00</p>
                    </div>
                </div>
                <el-button style="margin-right: 21px;" type="primary">个人中心</el-button>
            </div>
            <div class="head-left-content">
                <h2 style="font-weight: 600;font-size: 18px;color: #000000;line-height: 24px;">我的待办</h2>
                <div style="display: flex; justify-content: space-around;">
                    <div style="display: flex;align-items: center;">
                        <img src="../assets/3.png" style="width:60px; height: 60px;" />
                        <div>
                            <p style="font-weight: 400;
                            font-size: 14px;
                            color: #909399;
                            line-height: 24px;">待处理任务</p>
                            <p style="font-weight: 700;font-size: 24px;">8</p>
                        </div>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <img src="../assets/4.png" style="width:60px; height: 60px;"/>
                        <div>
                            <p style="font-weight: 400;
                            font-size: 14px;
                            color: #909399;
                            line-height: 24px;">待处理申请</p>
                            <p style="font-weight: 700;font-size: 24px;">8</p>
                        </div>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <img src="../assets/1.png" style="width:60px; height: 60px;"/>
                        <div>
                            <p style="font-weight: 400;
                            font-size: 14px;
                            color: #909399;
                            line-height: 24px;">待处理会议</p>
                            <p style="font-weight: 700;font-size: 24px;">8</p>
                        </div>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <img src="../assets/2.png" style="width:60px; height: 60px;"/>
                        <div>
                            <p style="font-weight: 400;
                            font-size: 14px;
                            color: #909399;
                            line-height: 24px;">待处理公文</p>
                            <p style="font-weight: 700;font-size: 24px;">8</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="head-left-bottom">
                <p style="width:100%; height:85px; border-bottom: 1px solid #D8D8D8; display: flex; align-items: center; padding: 27px; font-weight: 500; font-size: 18px;">我的应用</p>
                <div style="display: flex; justify-content: space-around; margin-top: 31px;">
                    <div>
                        <img src="../assets/kaoshi.png" style="width:80px; height:80px;" alt="">
                        <p style="text-align: center; margin-top: 10px;">考试系统</p>
                    </div>
                    <div>
                        <img src="../assets/kaoqing.png" style="width:80px; height:80px;" alt="">
                        <p style="text-align: center; margin-top: 10px;">考试系统</p>
                    </div>
                    <div>
                        <img src="../assets/paike.png" style="width:80px; height:80px;" alt="">
                        <p style="text-align: center; margin-top: 10px;">排课系统</p>
                    </div>
                    <div>
                        <img src="../assets/peixun.png" style="width:80px; height:80px;" alt="">
                        <p style="text-align: center; margin-top: 10px;">培训安排</p>
                    </div>
                    <div>
                        <img src="../assets/chengji.png" style="width:80px; height:80px;" alt="">
                        <p style="text-align: center; margin-top: 10px;">成绩管理</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="head-right">
            <div class="head-right-topA" >
                <div class="head-right-top" v-for="(ijsaid,index) in 10">
                    <div style="height: 81px;border-radius: 8px 8px 8px 8px; display:flex; align-items: center;">
                        <img src="../assets/tonggao.png" style="width:40px; height: 40px;"  />
                        <p>关于召开第二期学员培训</p>
                    </div>
                    <p>2024-04-08 10:00</p>
                </div>
            </div>
       
            <div class="head-right-bottom" style="display:flex;">
                <div style="width:80%;">
                    <el-calendar>
                        <template #date-cell="{ data }" :header='hahahahahha'>
                        <p :class="data.isSelected ? 'is-selected' : ''" :header='hahahahahha'>
                            {{ data.day.split('-').slice(1).join('-') }}
                            {{ data.isSelected ? '✔️' : '' }}
                        </p>
                        </template>
                    </el-calendar>
                </div>
                <div style="width:151px; height: auto; background-color: #FFF; padding-top: 50px;">
                    <div style="font-weight: 400;font-size: 12px;color: #606266; margin-top: 50px;">
                        <p>10:30-11:30</p>
                        <p>射击</p>
                    </div>
                    <div style="font-weight: 400;font-size: 12px;color: #606266; margin-top: 50px;">
                        <p>14:30-16:30</p>
                        <p>体能</p>
                    </div>
                    <div style="font-weight: 400;font-size: 12px;color: #606266; margin-top: 50px;">
                        <p>10:30-11:30</p>
                        <p>马克思主义</p>
                    </div>
                    <div style="font-weight: 400;font-size: 12px;color: #606266; margin-top: 50px;">
                        <p>10:30-11:30</p>
                        <p>理论</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
   components: {},
    data() {
        return {
            hahahahahha:'123456789',
        };
   },
//监听属性 类似于data概念
    computed: {},
//监控data中的数据变化
    watch: {},
//方法集合
    methods: {
    },
//生命周期 - 创建完成（可以访问当前this实例）
    created() {
    },
//生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    },
    //生命周期 - 创建之前 
    beforeCreate() {},
    //生命周期 - 挂载之前
    beforeMount() {},
    // 生命周期 - 更新之前 
    beforeUpdate() {},
    //生命周期 - 更新之后
    updated() {},
    //生命周期 - 销毁之前
    beforeDestroy() {},
    //生命周期 - 销毁完成
    destroyed() {},
    //如果页面有keep-alive缓存功能，这个函数会触发
    activated() {},
}
</script>
<style  scoped>
.head-left-bottom{
    width: 100%;
    height: 55%;
    background: #FFFFFF;
    border-radius: 12px 12px 12px 12px;
    margin-top: 20px;
}
.head-right-topA::-webkit-scrollbar {
    width: 0;
}
.head-right-topA{
    height: 258px;
    background: #FFFFFF;
    border-radius: 12px 12px 12px 12px;
    overflow: auto;
    background-color: #FFF;
    margin-bottom: 25px;
}
.head-right-top{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.head-left-content{
    padding: 30px 20px;
    height: 166px;
    background: #FFFFFF;
    border-radius: 0px 0px 12px 12px;
}
.head-left-top{
    background: #FFFFFF;
    border-radius: 12px 12px 0px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #D8D8D8;
}
.head-right{
    margin-top: 20px;
    width: 30%;
}
.head-left{
    margin-top: 20px;
    width: 69%;
}
.left-top-cent{
    padding: 48px;
    display: flex;
}
.head{
    width:100%;
    background-color: #F5F7FA;
    display: flex;
    justify-content: space-between;
}
</style>